<template>
  <div class="pagination">
    <button @click="changeBtnone()">首页</button>
    <button @click="changeBtn(currentPage - 1)">上一页</button>
    <button v-for="btn in pagebtns" :class="[{currentPage:btn === currentPage},'pagebtn']" @click="changeBtn(btn)">
      {{btn}}
    </button>
    <button @click="changeBtn(currentPage + 1)">下一页</button>
  </div>
</template>

<script>
  export default {
    name: "Pagination",
    data() {
      return {
        pagebtns: [1, 2, 3, 4, 5, '.....'],
        currentPage: 1,
      }
    },
    methods: {
      changeBtn(page) {
        if (page > 0) {
          this.currentPage = page
        }
        if (page === this.pagebtns[4]) {
          this.pagebtns.shift()
          this.pagebtns.splice(4, 0, this.pagebtns[3] + 1)
        } else if (page === this.pagebtns[0] && page !== 1 && page > 0) {
          this.pagebtns.unshift(this.pagebtns[0] - 1)
          this.pagebtns.splice(5, 1)
        }
        this.$emit('handleList',this.currentPage);
      },
      changeBtnone() {
        this.pagebtns = [1, 2, 3, 4, 5, '.....']
        this.changeBtn(1)
      }
    }
  }

</script>

<style lang="scss" scoped>
  .pagination {
    margin-top: 5px;
    margin-bottom: 20px;
    background-color: white;
    padding: 6px 20px;
    border-radius: 5px;
    /*box-shadow: 0px 2px 9px #888888;*/
    border: 1px solid #888888;
  }

  button {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #778087;
    border-radius: 3px;
    outline: none;
    height: 21px;
    cursor: pointer;
    padding: 0 2px;
    width: 55px;
    height: 29px;
  }

  .pagebtn {
    position: relative;
    bottom: 1px;
    width: 40px;
    margin: 0 4px;
  }

  .currentPage {
    color: white;
    background-color: #1f1b1b;

  }
</style>